<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-10-26
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>

        <script>

        function deleteById(id){
            if(confirm("是否删除？ 确定 ？确定 ？确定 ？确定 ？")){
                window.location = '${pageContext.request.contextPath}/dept?_type=delete&id='+id
            }
        }

        function createXHR(){
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else  {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }


        function deleteByIdAjax(id){
            if(confirm("是否删除？ 确定 ？确定 ？确定 ？确定 ？")){
                <%--window.location = '${pageContext.request.contextPath}/dept?_type=deleteAjax&id='+id--%>

                var xmlhttp = createXHR();
                xmlhttp.open("GET","${pageContext.request.contextPath}/dept?_type=deleteAjax&id="+id,true);
                xmlhttp.send();
                //true 浏览器等待返回之后才能干别的事儿
                //false 异步操作  xmlhttp 需要坚挺 xmlhttp 对象状态
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4   // 4: 请求已完成，且响应已就绪   200  400 404  500
                        && xmlhttp.status == 200  ){
                        var result = eval("("+xmlhttp.responseText +")")    //"{'success':"+success+"}"
                        alert("result.success: "+result.success)
                    }
                }

            }
        }


        $(function(){
            querypage();

        })

        function search(){
            $('#current').val(1) //每次点击查询按钮 从第一页开始查询
            querypage()
        }

        function querypage(){
            var url  = '${pageContext.request.contextPath}/dept';
            $.ajax(url,{
                type:'POST',
                data:{
                    _type:'ajaxList',
                    name:$("#name").val(),
                    current:$("#current").val(),
                    size:20
                },
                dataType:'json',
                success:function(ret){
                    appendTr(ret.data);
                    dealPages(ret);
                },
                fail:function(){

                }
            })
        }

        /**
         * 动态渲染表格
         * @param deptList
         */
        function appendTr(deptList){

            //清空原来的数据
            $(".dataTr").remove();

            // var table = document.getElementById("tab");
            deptList.forEach(function(dept ,index){
                $("#tab").append("<tr class='dataTr  "+(index%2==0?"odd":"even")+"    '><td>"+dept.id+"</td> " +
                    "<td>"+dept.name+"</td>" +
                    " <td>"+dept.address+"</td>" +
                    " <td>"+dept.leader+"</td>" +
                    "<td>"+dept.active+"</td>" +
                    "<td>"+dept.createtime+"</td>" +
                    "<td> <a href=\"${pageContext.request.contextPath}/dept?_type=toEdit&id=${dept.id}\">编辑</a> "+
                    "<a href=\"javascript:deleteById(${dept.id})\">删除</a> "+
                    "<a href=\"javascript:deleteByIdAjax(${dept.id})\">ajax删除</a></td>" +
                    "</tr>")
            })

        }

        function changeCurrent(current){
            $("#current").val(current);
            querypage();
        }


       function  dealPages(ret){
            let current = ret.current;
            let size = ret.size;
            let total = ret.total;
           let pages = total%size==0 ? total/size :  Math.floor(total/size) +1;
           $(".pageContainer").empty();
           $(".pageContainer").append("<span><</span>")
           for (let i = 1; i <= pages; i++) {
               console.log("i",i);
               console.log("pages",pages);
                let isCurrent =  i==current?"class='active'":"" ;
               $(".pageContainer").append("<span  onclick='changeCurrent("+i+")'    "+  isCurrent +"   >"+i+"</span>")
           }
           $(".pageContainer").append("<span>></span>")
        }

    </script>
    <style>
        .odd{
            background-color: beige;
        }
        .even{
            background-color: #97eeef;
        }

        tr:hover{
            cursor: pointer;
            background-color: #eca72a;
        }

        .pageContainer span{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #F4F4F5;
            line-height: 30px;
            text-align: center;
            cursor:pointer;
            margin: 0 10px;
        }
        .pageContainer span:hover , .pageContainer span.active{
            background-color: #85a6f5;
            color: white;
        }
    </style>
</head>
<body >

<form>
    <input type="hidden" id="current" value="1"/>
   科室名称：<input type="name" value=""  id="name"  /> <button type="button" onclick="search()">查询</button>
</form>

<hr>

部门列表
<a href="${pageContext.request.contextPath}/dept?_type=toAdd">添加</a>
<table cellpadding="0" cellspacing="0" border="1" width="100%" id="tab">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>address</th>
        <th>leader</th>
        <th>active</th>
        <th>createtime</th>
        <th>操作</th>
    </tr>



</table>

<hr>
<div class="pageContainer">

    <span><</span>
    <span>1</span>
    <span class="active">2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>></span>
</div>


</body>
</html>
